<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>HX-final-flask</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">



    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


  </head>
  <body>

<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">About</h4>
          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Contact</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">Follow on Twitter</a></li>
            <li><a href="#" class="text-white">Like on Facebook</a></li>
            <li><a href="#" class="text-white">Email me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <strong>用户购物车</strong>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
</header>

<main>
  <div class="nav-scroller py-1 mb-2">
</div>



        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-success">水果茶</strong>
          <h3 class="mb-0">益菌多水果茶系列</h3>
          <div class="mb-1 text-muted">Nov 11</div>
          <p class="mb-auto">益菌多推出季节限定茶饮系列 选用鲜果搭配定制茶底，果香融入茶韵，</p>
          <a href="/drink" class="stretched-link">点击查看更多</a>
        </div>
        <div class="col-auto d-none d-lg-block">

<svg t="1640589056812" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2437" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M836.096 353.792h-527.36c-9.216 0-16.384 7.68-16.384 16.384v261.632c0 9.216 7.68 16.384 16.384 16.384h27.648c9.216 0 16.384 7.68 16.384 16.384v187.904c0 9.216 7.68 16.384 16.384 16.384 9.216 0 16.384 7.68 16.384 16.384v39.424c0 9.216 7.68 16.384 16.384 16.384H742.4c9.216 0 16.384-7.68 16.384-16.384v-39.424c0-9.216 7.68-16.384 16.384-16.384 9.216 0 16.384-7.68 16.384-16.384v-187.904c0-9.216 7.68-16.384 16.384-16.384h27.648c9.216 0 16.384-7.68 16.384-16.384V370.176c1.024-9.216-6.656-16.384-15.872-16.384z" fill="#6ED7FF" p-id="2438"></path><path d="M742.4 961.536H402.944c-19.456 0-35.84-15.872-35.84-35.84v-36.864c-18.432-1.024-33.28-16.896-33.28-35.328v-185.856h-25.088c-19.456 0-35.84-15.872-35.84-35.84V370.176c0-19.456 15.872-35.84 35.84-35.84h527.36c19.456 0 35.84 15.872 35.84 35.84v261.632c0 19.456-15.872 35.84-35.84 35.84h-25.088v185.856c0 18.944-14.848 34.304-33.28 35.328v36.864c0 19.456-15.872 35.84-35.328 35.84z m-336.896-38.4h334.336v-36.864c0-18.944 14.848-34.304 33.28-35.328v-185.856c0-19.456 15.872-35.84 35.84-35.84h25.088V372.736h-522.24V629.76h25.088c19.456 0 35.84 15.872 35.84 35.84v185.856c18.432 1.024 33.28 16.896 33.28 35.328l-0.512 36.352z" fill="#6147B2" p-id="2439"></path><path d="M836.096 353.792h-527.36c-9.216 0-16.384 7.68-16.384 16.384v261.632c0 9.216 7.68 16.384 16.384 16.384h27.648c9.216 0 16.384 7.68 16.384 16.384v187.904c0 9.216 7.68 16.384 16.384 16.384 9.216 0 16.384 7.68 16.384 16.384v39.424c0 9.216 7.68 16.384 16.384 16.384H742.4c9.216 0 16.384-7.68 16.384-16.384v-39.424c0-9.216 7.68-16.384 16.384-16.384 9.216 0 16.384-7.68 16.384-16.384v-187.904c0-9.216 7.68-16.384 16.384-16.384h27.648c9.216 0 16.384-7.68 16.384-16.384V370.176c1.024-9.216-6.656-16.384-15.872-16.384z" fill="#6ED7FF" p-id="2440"></path><path d="M742.4 961.536H402.944c-19.456 0-35.84-15.872-35.84-35.84v-36.864c-18.432-1.024-33.28-16.896-33.28-35.328v-185.856h-25.088c-19.456 0-35.84-15.872-35.84-35.84V370.176c0-19.456 15.872-35.84 35.84-35.84h527.36c19.456 0 35.84 15.872 35.84 35.84v261.632c0 19.456-15.872 35.84-35.84 35.84h-25.088v185.856c0 18.944-14.848 34.304-33.28 35.328v36.864c0 19.456-15.872 35.84-35.328 35.84z m-336.896-38.4h334.336v-36.864c0-18.944 14.848-34.304 33.28-35.328v-185.856c0-19.456 15.872-35.84 35.84-35.84h25.088V372.736h-522.24V629.76h25.088c19.456 0 35.84 15.872 35.84 35.84v185.856c18.432 1.024 33.28 16.896 33.28 35.328l-0.512 36.352z" fill="#6147B2" p-id="2441"></path><path d="M836.096 353.792h-527.36c-9.216 0-16.384 7.68-16.384 16.384v261.632c0 9.216 7.68 16.384 16.384 16.384h27.648c9.216 0 16.384 7.68 16.384 16.384v187.904c0 9.216 7.68 16.384 16.384 16.384 9.216 0 16.384 7.68 16.384 16.384v39.424c0 9.216 7.68 16.384 16.384 16.384H742.4c9.216 0 16.384-7.68 16.384-16.384v-39.424c0-9.216 7.68-16.384 16.384-16.384 9.216 0 16.384-7.68 16.384-16.384v-187.904c0-9.216 7.68-16.384 16.384-16.384h27.648c9.216 0 16.384-7.68 16.384-16.384V370.176c1.024-9.216-6.656-16.384-15.872-16.384z" fill="#6ED7FF" p-id="2442"></path><path d="M801.28 351.744h-73.728L675.84 592.896h72.704zM563.712 351.744l-51.2 241.152h111.616l52.736-241.152z" fill="#8DEAFF" p-id="2443"></path><path d="M742.4 961.536H402.944c-19.456 0-35.84-15.872-35.84-35.84v-36.864c-18.432-1.024-33.28-16.896-33.28-35.328v-185.856h-25.088c-19.456 0-35.84-15.872-35.84-35.84V370.176c0-19.456 15.872-35.84 35.84-35.84h527.36c19.456 0 35.84 15.872 35.84 35.84v261.632c0 19.456-15.872 35.84-35.84 35.84h-25.088v185.856c0 18.944-14.848 34.304-33.28 35.328v36.864c0 19.456-15.872 35.84-35.328 35.84z m-336.896-38.4h334.336v-36.864c0-18.944 14.848-34.304 33.28-35.328v-185.856c0-19.456 15.872-35.84 35.84-35.84h25.088V372.736h-522.24V629.76h25.088c19.456 0 35.84 15.872 35.84 35.84v185.856c18.432 1.024 33.28 16.896 33.28 35.328l-0.512 36.352z" fill="#6147B2" p-id="2444"></path><path d="M342.016 545.28V599.04c33.792 3.072 60.928 31.232 60.928 66.048v163.84c19.968 11.264 33.28 32.768 33.28 57.344v6.144h272.896v-6.144c0-24.576 13.312-46.08 33.28-57.344v-163.84c0-34.816 26.624-63.488 60.928-66.048v-54.272H342.016v0.512z" fill="#FF52A1" p-id="2445"></path><path d="M305.664 313.856h153.088v-3.072c0-41.472-16.384-79.36-43.008-107.008L305.664 313.856z" fill="#FFB87D" p-id="2446"></path><path d="M472.576 328.192H270.848l145.408-145.408 10.24 10.752c30.208 31.744 47.104 73.216 47.104 117.248v2.56l-1.024 14.848z m-132.608-28.672h103.936c-2.048-27.648-12.288-53.248-29.184-75.264L339.968 299.52z" fill="#6147B2" p-id="2447"></path><path d="M391.168 176.64c-27.648-29.184-67.072-47.616-110.592-48.128v158.72l110.592-110.592z" fill="#FF52A1" p-id="2448"></path><path d="M266.752 321.536V113.664h14.336c46.08 0.512 88.576 19.456 120.32 52.736l9.728 10.24-144.384 144.896zM295.424 143.36v109.056l75.776-75.776c-21.504-18.432-48.128-29.696-75.776-33.28z" fill="#6147B2" p-id="2449"></path><path d="M66.56 341.504c1.024 43.008 18.944 81.92 48.128 109.568l109.568-109.568H66.56z" fill="#FFB87D" p-id="2450"></path><path d="M115.2 470.528l-10.24-9.728c-32.768-31.232-51.712-73.728-52.736-119.296l-0.512-14.336h206.848l-143.36 143.36zM81.92 355.84c3.584 27.648 14.848 53.248 33.28 74.752l74.752-74.752H81.92z" fill="#6147B2" p-id="2451"></path><path d="M248.32 287.744v-158.72h-2.048c-43.008 0-82.432 17.408-110.592 46.08l112.64 112.64z" fill="#FFB87D" p-id="2452"></path><path d="M262.144 322.048L115.2 175.104l10.24-10.24c32.256-32.256 74.752-50.176 120.832-50.176h15.872l0.512 14.336-0.512 193.024zM156.16 175.616l77.824 77.824V143.872c-29.184 2.56-55.808 13.312-77.824 31.744z" fill="#6147B2" p-id="2453"></path><path d="M248.32 363.008L138.752 472.576c27.648 26.624 65.536 43.008 107.008 43.008h2.048l0.512-152.576z" fill="#FF52A1" p-id="2454"></path><path d="M245.76 529.408c-43.52 0-85.504-16.896-117.248-47.104l-10.752-10.24 143.872-143.872v200.704l-15.872 0.512zM159.744 471.552c21.504 16.384 47.104 26.624 74.24 28.672V397.312L159.744 471.552z" fill="#6147B2" p-id="2455"></path><path d="M110.592 197.12c-27.648 28.16-45.056 66.56-45.056 109.568v3.072h157.696l-112.64-112.64z" fill="#FF52A1" p-id="2456"></path><path d="M257.536 324.096H51.712l-0.512-14.848v-2.56c0-45.056 17.408-87.552 49.152-119.296l10.24-10.24 146.944 146.944z m-177.152-28.672h108.544L111.104 218.112c-17.92 22.016-28.672 49.152-30.72 77.312z" fill="#6147B2" p-id="2457"></path><path d="M742.4 961.536H402.944c-19.456 0-35.84-15.872-35.84-35.84v-36.864c-18.432-1.024-33.28-16.896-33.28-35.328v-185.856h-25.088c-19.456 0-35.84-15.872-35.84-35.84V370.176c0-19.456 15.872-35.84 35.84-35.84h527.36c19.456 0 35.84 15.872 35.84 35.84v261.632c0 19.456-15.872 35.84-35.84 35.84h-25.088v185.856c0 18.944-14.848 34.304-33.28 35.328v36.864c0 19.456-15.872 35.84-35.328 35.84z m-336.896-38.4h334.336v-36.864c0-18.944 14.848-34.304 33.28-35.328v-185.856c0-19.456 15.872-35.84 35.84-35.84h25.088V372.736h-522.24V629.76h25.088c19.456 0 35.84 15.872 35.84 35.84v185.856c18.432 1.024 33.28 16.896 33.28 35.328l-0.512 36.352z" fill="#6147B2" p-id="2458"></path><path d="M718.336 369.664c-2.048 0-4.096-0.512-6.144-1.024-9.728-3.584-15.36-14.336-11.776-24.064L798.208 66.56l155.136-4.096c10.752 0 19.456 8.192 19.456 18.432 0.512 10.752-8.192 19.456-18.432 19.456l-128.512 3.584-89.088 252.928c-3.072 7.68-10.24 12.8-18.432 12.8z" fill="#6147B2" p-id="2459"></path></svg>

        </div>
      </div>
    </div>
  </div>

<footer class="blog-footer">
  <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
  <p>
    <a href="#">Back to top</a>
  </p>
</footer>



  </body>
</html>